<template>
  <div>
    <el-form :inline="true" label-width="0.8rem">
      <el-row class="SearchCondition">
        <el-col :span="8">
          <el-form-item label="流水号:" width="100%" size="medium">
            <el-input
              placeholder=""
              v-model="custSoNumber"
              class="input-with-select"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="登记事项">
            <el-select v-model="filterMode">
              <el-option label="新装" value="4010100000"></el-option>
              <el-option label="补点" value="4040700001"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="">
            <el-button type="primary" size="mini" @click="query"
              >查询</el-button
            >
            <el-button type="primary" size="mini" @click="importOrder"
              >导入</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- form 结束-->

    <!-- 表格部分 -->
    <el-table
      class="jlTable"
      style="width: 100%"
      border
      align="center"
      :header-cell-style="{
        background: '#F2F2F2',
        color: '#333',
        'text-align': 'center',
      }"
      :cell-style="{ 'text-align': 'center' }"
      :data="templateList"
      @selection-change="handleSelectionChange"
      element-loading-customClass="ne-loading"
      element-loading-background="rgba(255, 255, 255, 0.6)"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column
        label="序号"
        type="index"
        width="50"
        align="center"
      ></el-table-column>
      <el-table-column label="流水号" width="200">
        <template slot-scope="scope"
          ><a
            @click="goDetailView(scope.row)"
            style="color: blue; cursor: pointer"
          >
            {{
              JSON.parse(scope.row.batchNbr) > 0
                ? scope.row.custSoNumber +
                  "-" +
                  scope.row.batchNbr +
                  "(" +
                  scope.row.orderItemSeq +
                  ")"
                : scope.row.custSoNumber + "(" + scope.row.orderItemSeq + ")"
            }}
          </a></template
        >
      </el-table-column>
      <el-table-column label="销售品名称">
        <template slot-scope="scope">{{ scope.row.offerName }}</template>
      </el-table-column>
      <el-table-column label="登记事项">
        <template slot-scope="scope">{{ scope.row.serviceOfferName }}</template>
      </el-table-column>
      <el-table-column label="受理日期">
        <template slot-scope="scope">{{ scope.row.acceptDate }}</template>
      </el-table-column>
      <el-table-column label="客户经理">
        <template slot-scope="scope">{{ scope.row.contactNameCust }}</template>
      </el-table-column>
      <el-table-column label="业务经理">
        <template slot-scope="scope">{{
          scope.row.contactNameBusiness
        }}</template>
      </el-table-column>
    </el-table>

    <!-- 表格结束 -->

    <!-- 分页 -->
    <el-row type="flex" class="row-bg mar-15" justify="center">
      <el-col :span="10">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="parseInt(pageInfo.pageIndex)"
          background
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageInfo.pageSize"
          :total="parseInt(pageInfo.rowCount)"
          layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { mapState } from "vuex";
import CustOrderService from "@/api/order/CustOrderService";
export default {
  data() {
    return {
      //归档单查询数据
      custSoNumber: "",
      filterMode: "",
      templateList: [],
      selectedItems: [],
      // 分页模型
      pageInfo: {
        pageIndex: 1,
        pageSize: 10,
        rowCount: 0,
      },
      // pageSize: 10,
      // pageIndex: 1,
      total: 0,
    };
  },
  props: {
    ODKInfo: {
      type: Object,
      default() {
        return "";
      },
    },
  },
  computed: {
    ...mapState("user", ["user"]),
  },
  async mounted() {
    //登记事项默认新装
    this.filterMode = "4010100000";
    await this.query();
  },
  methods: {
    async query() {
      console.log(this.ODKInfo);
      var params = {};
      // params.custId = this.ODKInfo.custId;
      params.custId = "204";
      //301200状态为归档
      params.statusCds = "301200";
      params.handleStateCd = "50030002";
      //params.updateStaff = "-1";
      params.serviceOfferIds = this.filterMode;
      params.custSoNumber = this.custSoNumber;

      let pageInfo = {
        pageIndex: this.pageInfo.pageIndex,
        pageSize: this.pageInfo.pageSize,
      };
      params.pageInfo = pageInfo;
      console.log("pageInfo:", pageInfo);
      var result = await CustOrderService.qryOrderItemList(params);
      if (result.meta.resultCode == 0) {
        this.templateList = result.meta.orderItems;
        this.pageInfo.rowCount = result.meta.pageInfo.rowCount;
      }
    },

    //导入归档单保存服务
    async importOrder() {
      if (this.selectedItems.length == 0) {
        this.$confirm("请选择一条记录！", "提示", {
          confirmButtonText: "确定",
          showCancelButton: false,
          type: "warn",
          center: true,
        });
        return;
      }
      let orderItemIds = " ";
      for (var i = 0; i < this.selectedItems.length; i++) {
        if (i == 0) {
          orderItemIds += this.selectedItems[i].orderItemId;
          console.log(this.selectedItems[i].orderItemId);
        } else {
          orderItemIds += "," + this.selectedItems[i].orderItemId;
        }
      }
      var reqMap = {
        // custId: this.ODKInfo.custId,
        custId: "204",
        orderItemIds: orderItemIds,
        custSoNumber: this.selectedItems[0].custSoNumber,
        staffId: this.user.staffId,
        handleOrgId: this.user.orgId,
        orderSourceId: this.selectedItems[0].orderSourceId,
      };
      var res = await CustOrderService.saveArchiveOrder(reqMap);

      console.log("saveArchiveOrder:", res);
      if (res.meta.resultCode == "0") {
        this.$message({
          type: "success",
          message: "保存成功!",
        });
        // this.query();
        let param = {
          custSoNumber: this.selectedItems[0].custSoNumber,
          custOrderId: this.selectedItems[0].custOrderId,
          custId: "204",
        };

        this.$emit("copyArchiveClose", param);
      } else {
        this.$message({
          showClose: true,
          message: res.meta.resultMsg,
          type: "error",
        });
      }
    },
    //页面改变触发事件
    pageChange(val) {
      console.log(val);
      this.pageIndex = val;
      this.query();
    },
    // handleSizeChange(val) {
    //   console.log(val);
    //   this.pageSize = val;
    //   this.query();
    // },
    handleSelectionChange(e) {
      this.selectedItems = e;
      console.log(e);
    },

    handleSizeChange(size) {
      this.pageInfo.pageSize = size;
      this.query();
    },
    handleCurrentChange(pageIndex) {
      this.pageInfo.pageIndex = pageIndex;
      this.query();
    },

    async qryOrderItemList() {
      var res = await CustOrderService.downOrderItemExcelTemple(val);
    },
  },
};
</script>
<style lang="scss">
.el-form--inline .el-form-item {
  display: inline-flex;
  margin-right: 0.1rem;
  vertical-align: top;
  width: 100%;
}
::v-deep .el-upload {
  float: left;
}
::v-deep .dic-table-box .ne-row-class {
  cursor: inherit;
}
</style>


